<template>
  <div>
    <el-container >
      <!-- 头部 -->
      <el-header height="100px">
        <el-row :gutter="20" >
          <!-- type="flex" justify="end" -->
          <el-col :span="8" >
            <h2 style="margin-left: 10%; margin-top: 10px;">xxxxx融资项目平台</h2>
          </el-col>
          <el-col :span="8">
            <el-form ref="form"  label-width="80px" style="margin-top: 10px;" >
              <el-input  placeholder="找项目" suffix-icon="el-icon-search" @keyup.native.enter="handleSearch"></el-input>
            </el-form>
          </el-col>
          <el-col :span="8">
            <el-button  style=" margin-left: 40%; margin-top: 10px;" icon="el-icon-user" @click="goLogin">登录</el-button>
<!--            <el-button  style=" margin-left: 10px; margin-top: 10px;" icon="el-icon-user" @click="goFinanceLogin">融资企业用户登录</el-button>-->

          </el-col>
        
        


        </el-row>

      </el-header>

      <!-- 主要部分 -->

      <el-main>
        <el-row>
          <div class="my-div">
            <span style="font-size: 16px;">数据总览</span>
          </div>
        </el-row>

        <div class="my-div2">
          <el-row :gutter="20" >
            <el-col :span="6" >
              <div>
                <el-statistic  title="已注册核心企业（家）">
                  <template  slot="formatter" > <span > 1000000 </span> </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="已注册融资企业（家）" >
                  <template slot="formatter"> 1000000 </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="累计注册用户数（人）">
                  <template slot="formatter" > 1000000 </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="xxxxxx">
                  <template slot="formatter"> xxxxx </template>
                </el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="my-div2">
          <el-row :gutter="20" >
            <el-col :span="6" >
              <div>
                <el-statistic  title="累计融资金额（元）">
                  <template  slot="formatter" > <span > 1000000 </span> </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="累计为用户赚取收益（元）" >
                  <template slot="formatter"> 1000000 </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="xxxxx">
                  <template slot="formatter" > xxxxx </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="xxxx">
                  <template slot="formatter"> xxxx </template>
                </el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>


        <el-row type="flex" justify="center" align="middle">
          <div class="my-div" style="margin-top: 2%">
            <span style="font-size: 16px;">今日数据</span>
          </div>
        </el-row>


        <div class="my-div2">
          <el-row :gutter="20" >
            <el-col :span="6" >
              <div>
                <el-statistic  title="今日成交金额（元）">
                  <template  slot="formatter" > <span >8,814,846.00 </span> </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="今日回款金额（元）" >
                  <template slot="formatter"> 714,716.05 </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="今日新增注册用户（个）">
                  <template slot="formatter" > 4862 </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="今日发布项目数（个）">
                  <template slot="formatter"> xxxxx </template>
                </el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-row type="flex" justify="center" align="middle">
          <div class="my-div" style="margin-top: 2%">
            <span style="font-size: 16px;">资金流动</span>
          </div>
        </el-row>

        <div class="my-div2">
          <el-row :gutter="20" >
            <el-col :span="10" style="margin-top: 2%">
              <el-card style="height:300px">
              <div style="height:300px" ref="bar">
              </div>
              </el-card>
            </el-col>
              <el-col :span="14" style="margin-top: 2%">
                <el-card style="height:300px">
                  <div style="height:300px;width: 100%" ref="chartDome">
                  </div>
                </el-card>
            </el-col>
          </el-row>

        </div>

      </el-main>

      <!-- 底部 -->
      <el-footer height="200px" >
        <el-row type="flex" justify="center">
          <el-col :span="12" style="width: 650px;padding-left: 7%">
            <div >
              <div class="foot-div">
                <h3 style="margin-left: 20px;">xxxxx融资项目平台</h3>
              </div>
              <div class="foot-div">
                <el-link :underline="false" class="el-link1">项目简介</el-link>
                <el-link :underline="false" class="el-link1">创始团队</el-link>
                <el-link :underline="false" class="el-link1">诚聘英才</el-link>
                <el-link :underline="false" class="el-link1">在线客服</el-link>
                <el-link :underline="false" class="el-link1">常见问题</el-link>
              </div>
              <div style=" height: 30px">
                <span style="margin-left: 20px;font-size: 12px">邮箱地址：xxxxxx@xxxx.com</span>
              </div>
              <div>
                <p style="margin-left: 20px; height: 15px;font-size: 12px">2023 www.taikula.com, All Rights Reserved. xxxxxxxxxx网络科技有限公司</p>
                <p style="margin-left: 20px; height: 15px;font-size: 12px">苏ICP备000000001号 苏公安网备00000000000001号</p>
              </div>
            </div>
          </el-col>

          <el-col :span="12" style="width: 600px;margin-left: 100px">
            <div style=" margin-left: 20%; ">
              <div class="foot-div">
                <h3 style="margin-left: 20px;">友情链接</h3>
              </div>
              <div style=" height: 70px">
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>
                <el-link :underline="false" class="el-link1">xxxxxx</el-link>

              </div>
              <div  style="margin-left: 20px;">
                <el-button icon="el-icon-mobile-phone">下载APP</el-button>
                <el-button icon="el-icon-chat-dot-round">微信公众号</el-button>
                <el-button icon="el-icon-connection">投资助手</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
  
</template>

<script>

export default {
  data(){
    return{
      chartOptions: null,
    }
  },
  methods: {
    handleSearch() {
      this.$message('这是一条消息提示');
    },
    goFinanceLogin() {
      this.$router.push({
        name: 'financeLogin'
      })
    },
    goLogin() {
      this.$router.push({
        name: 'login'
      })
    },
    echartsInit() {
      var myChart = this.$echarts.init(this.$refs.bar);
      var option = {
        title: {
          text: '近期融资情况'
        },
        tooltip: {},
        legend: {
          data: ['金额/万元'],
          right: 20,
          textStyle: {
            fontSize: 11,
            fontWeight: 'bold',
            color: '#333',

          }
        },
        xAxis: {
          data: ['x企业', 'x企业', 'x企业', 'x企业', 'x企业', 'x企业'],
          axisLabel: {
            rotate: 45, // 设置标签旋转角度
          },
        },
        yAxis: {},
        series: [
          {
            name: '金额/万元',
            type: 'bar',
            data: [50, 200, 360, 100, 100, 150]
          }
        ]
      };
      myChart.resize();
      myChart.setOption(option);
    },
    generateChart() {
      var myChart = this.$echarts.init(this.$refs.chartDome);
      const option = {
          xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
          },
          yAxis: {},
        legend: {
          data: ['充值', '提现'],
          right: 20,
        },
          series: [
            {
              data: [100, 220, 280, 430, 200],
              name:'充值',
              type: 'line',
              stack: 'x',
              areaStyle: {}
            },
            {
              data: [-500, -400, -300, -500, -100],
              name:'提现',
              type: 'line',
              stack: 'x',
              areaStyle: {}
            }
          ]
        };
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted(){
    this.echartsInit();
    this.generateChart();
    window.addEventListener('resize',  this.echartsInit)
    window.addEventListener('resize',  this.generateChart)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>



<style scoped>
.el-container{
  height: 100%;
}
.el-header{
  background-color: #CCFFCC;
  padding-top: 20px;
  position: fixed;
  width: 100%;
  z-index: 100;

}
.el-footer{

  background-color:#66CCCC;
  padding-top: 20px;
  margin-top: 20px;


}
.el-main {
  color: #333;
  text-align: center;
  overflow: auto; /* 设置内容可滚动 */
}
.el-link1{
  margin-left: 20px;
  font-size: 16px
}
.foot-div{
  height: 50px;
}
.el-main{
  margin-top: 100px;
  margin-bottom: 0;

}
.my-div{
  margin-left: 15%;
  margin-right: 15%;
  background-color:	rgb(245, 245, 245);
  width: 70%;
  height: 50px;
  text-align: left;
  line-height: 50px;
  border: 1px solid honeydew ;

}
.my-div span{
  margin-left: 2%;
  font-size: 15px ;
  font-weight: bold;
}
.my-div2{
  margin-left: 15%;
  margin-right: 15%;
  width: 70%;
}
.el-statistic{
  margin-top: 5%;
  border: 1px solid honeydew ;
  height: 100px;
  padding-top: 15px;
  text-align: center;
  padding-left: 20px;
  line-height: 30px;
  background-color: rgb(255, 250, 250);
}
.el-progress{
  display: inline-block;
}

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.chart-card {
  width: 800px;
}
.chart-header {
  padding: 20px;
}
.chart-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
.chart-body {
  height: 500px;
}

</style>